<template>
	<!-- 首页 -->
	<view class="index-page page-container">
		<!-- 轮播图 -->
		<view class="swiper-container">
			<swiper class="swiper" circular :indicator-dots="swiperConfig.indicatorDots" :autoplay="swiperConfig.autoplay"
				:interval="swiperConfig.interval" :duration="swiperConfig.duration">
				<swiper-item>
					<image class="swiper-img" src="/static/images/index-banner.jpg" mode="aspectFill" />
				</swiper-item>
				<swiper-item>
					<image class="swiper-img" src="/static/images/index-banner.jpg" mode="aspectFill" />
				</swiper-item>
				<swiper-item>
					<image class="swiper-img" src="/static/images/index-banner.jpg" mode="aspectFill" />
				</swiper-item>
			</swiper>
		</view>

		<!-- 会员信息 -->
		<view class="member-info m-auto container flex-center card">
			<!-- 会员头像 -->
			<view class="avatar">
				<image class="avatar-img" src="/static/images/avatar.jpg" mode="aspectFill" />
			</view>
			<!-- 会员积分 -->
			<view class="score">
				<view class="score-num truncate">我的积分 36666666666666</view>
				<view class="desc">可兑换优惠卷及限量周边</view>
			</view>
			<!-- 会员码 -->
			<view class="qr-code flex-center">
				<view class="qr-code-container">
					<image class="qr-code-icon" src="/static/svg-icon/qr-code.svg" mode="aspectFill"></image>
				</view>
				<text>会员码</text>
			</view>
		</view>

		<!-- 取餐方式 -->
		<view class="take-way m-auto container flex-around card">
			<view class="way">
				<image class="way-img" src="/static/images/take-way1.png" mode="aspectFill" />
				<view class="name">门店自取</view>
				<view class="desc">提前下单更省时</view>
			</view>
			<view class="way">
				<image class="way-img" src="/static/images/take-way2.png" mode="aspectFill" />
				<view class="name">外面点单</view>
				<view class="desc">足不出户更省力</view>
			</view>
		</view>

		<!-- 获取优惠 -->
		<view class="get-discount m-auto container flex-center">
			<view class="way card">
				<image class="way-img" src="/static/svg/tgyh.svg" mode="aspectFill" />
				<view class="name">团购优惠</view>
			</view>
			<view class="way card">
				<image class="way-img" src="/static/svg/hycz.svg" mode="aspectFill" />
				<view class="name">会员充值</view>
			</view>
			<view class="way card">
				<image class="way-img" src="/static/svg/jfsc.svg" mode="aspectFill" />
				<view class="name">积分商城</view>
			</view>
		</view>

		<!-- 自定义 tabBar -->
		<custom-tabbar />
	</view>
</template>

<script setup>
	import {
		onBeforeMount
	} from 'vue';

	// 轮播图配置
	const swiperConfig = {
		duration: 500, // 切换动画时长
		interval: 5000, // 自动切换时间间隔
		autoplay: true, // 是否自动切换
		indicatorDots: false, // 是否显示指示点
	};
</script>

<style lang="scss" scoped>
	// 轮播图
	.swiper {
		z-index: 10;
		height: 614rpx;
		position: relative;

		.swiper-img {
			width: 100%;
			height: 100%;
		}
	}

	// 会员信息
	.member-info {
		z-index: 30;
		height: 180rpx;
		margin-top: -40rpx;
		position: relative;

		// 会员头像
		.avatar {
			width: 100rpx;
			height: 100rpx;
			overflow: hidden;
			border-radius: 50%;
			margin-right: 20rpx;

			.avatar-img {
				width: 100%;
				height: 100%;
			}
		}

		// 会员积分
		.score {
			width: 265rpx;
			margin-right: 160rpx;

			.score-num {
				width: 100%;
				color: #3b3b3b;
				font-size: 32rpx;
				font-weight: bold;
			}

			.desc {
				color: #b3b3b3;
				font-size: 24rpx;
				margin-top: 12rpx;
			}
		}

		// 会员码
		.qr-code {
			color: #3b3b3b;
			font-size: 24rpx;
			flex-direction: column;

			.qr-code-container {
				width: 48rpx;
				height: 48rpx;
				margin: 0 auto;
				border: 2rpx dashed #999;
				margin-bottom: 12rpx;

				.qr-code-icon {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	// 取餐方式
	.take-way {
		height: 332rpx;
		margin-top: 30rpx;

		.way {
			text-align: center;

			.way-img {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
			}

			.name {
				color: #3b3b3b;
				font-size: 36rpx;
				font-weight: bold;
				margin-top: 14rpx;
			}

			.desc {
				color: #b3b3b3;
				font-size: 24rpx;
				margin-top: 24rpx;
			}
		}
	}

	// 获取优惠
	.get-discount {
		margin-top: 30rpx;

		.way {
			width: 210rpx;
			display: flex;
			height: 272rpx;
			align-items: center;
			flex-direction: column;
			justify-content: center;

			&:nth-child(2) {
				margin: 0 20rpx;
			}

			.way-img {
				width: 76rpx;
				height: 70rpx;
			}

			.name {
				color: #3b3b3b;
				font-size: 30rpx;
				font-weight: bold;
				margin-top: 25rpx;
			}
		}
	}
</style>